import {
  Button,
  DatePicker,
  Form,
  Grid,
  Input,
  Select,
  Space,
  type FormInstance,
} from "@arco-design/web-react";
import { IconRefresh, IconSearch } from "@arco-design/web-react/icon";
import "./index.less";
import { SearchFormInputProps, SearchSelectProps } from "../interface";
import clsx from "clsx";
import { useRef } from "react";
const { Row, Col } = Grid;
const { useForm } = Form;
const defaultColSpan = 8;
export default function SearchForm(props: any) {
  const [form] = useForm();
  const formRef = useRef();
  const { initialValues=[], formOptions } = props;
  console.log(formOptions);
  return (
    <div className="flex search-form-wrapper">
      <Form
        form={form}
        ref={formRef}
        initialValues={initialValues}
        labelAlign="right"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        className="pr-5"
      >
        <Row gutter={24}>
          {formOptions.map((item: any, index: any) => {
            const {
              fieldName,
              colSpan,
              type,
              label,
              placeholder,
              defaultValue = "",
              ...rest
            } = item;
            console.log(type);
            if (type === "Input") {
              return (
                <Col
                  span={colSpan || defaultColSpan}
                  key={`form-col-${fieldName}-${index}`}
                >
                  <Form.Item
                    label={label}
                    field={fieldName}
                    initialValue={defaultValue}
                  >
                    <Input
                      {...(rest as SearchFormInputProps)}
                      placeholder={
                        !item.placeholder
                          ? `请输入${item.label}`
                          : item.placeholder
                      }
                    />
                  </Form.Item>
                </Col>
              );
            }
            if (type === "Select") {
              return (
                <Col
                  key={`form-col-${fieldName}-${index}`}
                  span={colSpan || defaultColSpan}
                >
                  <Form.Item label={label} field={fieldName}>
                    <Select
                      {...(rest as SearchSelectProps)}
                      placeholder={
                        !placeholder ? `请选择${label}` : placeholder
                      }
                    />
                  </Form.Item>
                </Col>
              );
            }
          })}
        </Row>
      </Form>
      <Space
        direction={'vertical'}
        className={clsx(
          "flex flex-col justify-between pl-5 mb-5",
          "right-button"
        )}
      >
        <Button loading={props.loading} type="primary" icon={<IconSearch />}>
          查询
        </Button>
        <Button loading={props.loading} type="primary" icon={<IconRefresh />}>
          重制
        </Button>
      </Space>
    </div>
  );
}
